@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

:root {
    font-size: 15px;
}

body {
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    min-height: 100vh;
    background-color: #ddb9d6;
    background-image:
        radial-gradient(closest-side, #d4a37399, #d4a37300),
        radial-gradient(closest-side, #fad2e199, #fad2e100),
        radial-gradient(closest-side, #bee1e699, #bee1e600),
        radial-gradient(closest-side, #e9edc999, #e9edc900),
        radial-gradient(closest-side, #cddafd99, #cddafd00);
    background-size:
        130vmax 130vmax,
        80vmax 80vmax,
        90vmax 90vmax,
        110vmax 110vmax,
        90vmax 90vmax;

    background-position:
        -80vmax -80vmax,
        60vmax 30vmax,
        10vmax 10vmax,
        -30vmax -10vmax,
        50vmax 50vmax;

    background-repeat: no-repeat;


    animation: 10s movement linear infinite;
}

body::after {
    content: '';
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    letter-spacing: 4px;
}

span {
    position: relative;
    z-index: 10;
    display: flex;
    min-height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    color: transparent;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, .6),
        0px 4px 4px rgba(0, 0, 0, 0.05);
}


@keyframes movement {

    0%,
    100% {
        background-size:
            130vmax 130vmax,
            80vmax 80vmax,
            90vmax 90vmax,
            110vmax 110vmax,
            90vmax 90vmax;

        background-position:
            -80vmax -80vmax,
            60vmax 30vmax,
            10vmax 10vmax,
            -30vmax -10vmax,
            50vmax 50vmax;
    }

    25% {
        background-size:
            100vmax 100vmax,
            90vmax 90vmax,
            100vmax 100vmax,
            90vmax 90vmax,
            100vmax 100vmax;

        background-position:
            -60vmax -70vmax,
            50vmax 40vmax,
            20vmax 0vmax,
            -20vmax -20vmax,
            40vmax 40vmax;
    }

    50% {
        background-size:
            120vmax 120vmax,
            80vmax 60vmax,
            90vmax 120vmax,
            90vmax 90vmax,
            110vmax 105vmax;

        background-position:
            -65vmax -75vmax,
            45vmax 40vmax,
            30vmax 5vmax,
            -25vmax -15vmax,
            42vmax 30vmax;

    }

    75% {
        background-size:
            80vmax 100vmax,
            66vmax 65vmax,
            100vmax 110vmax,
            95vmax 95vmax,
            115vmax 115vmax;

        background-position:
            -75vmax -75vmax,
            35vmax 40vmax,
            30vmax 25vmax,
            -25vmax -25vmax,
            42vmax 33vmax;

    }


}